Definition Inlineframe (iframe)
Ein iFrame bzw. Inlineframe (engl. frame = dt. Rahmen) ist ein HTML-Element, das als Rahmen innerhalb einer Webseite platziert wird. Die Technik wird häufig verwendet, um Werbung oder Inhalte anderer Anbieter in eine Webseite einzubinden. Sehr bekannt ist das Einbinden von YouTube-Videos in Webseiten mittels iFrames.
Inlineframe in einer Webseite
Code für einen Inlineframe / iFrame
Inlineframes werden mit folgendem HTML-Code in Webseiten eingebunden:
<iframe src="https://www.domain.de/webseite.html" name="musterframe" width="500" height="200" align="left" scrolling="yes" marginheight="0" marginwidth="0" frameborder="0">
</iframe>
Bedeutung der einzelnen Attribute des iframe-Tags
name="musterframe"
Name des iFrame, um verlinkte Inhalte in diesem Inlineframe zu öffnen.
Beispiel: Longtail-Grafik im Inlineframe öffnen. Frame-Grafik im iFrame öffnen.
width="500"
Breite des iFrame in Pixel
height="200"
Höhe des iFrame in Pixel
align="left"
Mit align="left" richten Sie den Inlineframe links aus, so dass nachfolgende Inhalte. Nachfolgende Inhalte fließen dann rechts um den Frame. Nutzen Sie "right", um Text oder andere Inhalte links neben dem Inlineframe zu platzieren.
Rechts ein Inlineframe, der mit align="right" neben diesem Text platziert wurde.
scrolling="yes"
Mit scrolling="yes" können Sie Scrollbars in den Inlineframe integrieren. Wünschen Sie keine Scrollbars, nutzen Sie "no". Soll nur eine Scrollbar erscheinen, wenn der Inhalt im Inlineframe größer ist als der Inlineframe selber, dann nutzen Sie "auto".
marginheight="0"
Mit marginheight bestimmen Sie den Abstand in Pixel zwischen dem oberem bzw. unterem Rahmen und dem Inhalt des Inlineframe.
marginwidth="0"
Mit marginwidth bestimmen Sie den Abstand in Pixel zwischen dem rechtem und linkem Rahmen und dem Inhalt des Inlineframe.
frameborder="0"
Mit frameborder="0" können Sie verhindern, dass um den Inlineframe ein Rahmen dargestellt wird.
Inlineframe und Suchmaschinenoptimierung (SEO)
Wer auf Suchmaschinenoptimierung und Indexierbarkeit seiner Website für Google & Co. Wert legt, sollte bei wichtigen Inhalten auf Frames und Inlineframes verzichten. Suchmaschinen erkennen den iframe-Tag im HTML-Code. Die Crawler berücksichtigen die Inhalte innerhalb der Inlineframes aber nicht.
FAQs zum Inlineframe (iFrame)
Was ist ein iFrame?
Ein iFrame (kurz für Inlineframe) ist ein HTML-Element, das es ermöglicht, ein anderes HTML-Dokument innerhalb einer aktuellen Webseite einzubetten. Im Gegensatz zu klassischen Framesets ist ein iFrame ein fester Bestandteil des Layouts einer einzelnen Seite und verhält sich ähnlich wie ein eingebettetes Bild, jedoch mit interaktivem Inhalt.
Wann sollte man iFrames verwenden?
iFrames sind ideal für die Integration von Inhalten von Drittanbietern, ohne die eigene Seite verlassen zu müssen:
- Multimedia: Einbetten von YouTube-Videos oder SoundCloud-Playern.
- Karten: Integration von Google Maps oder OpenStreetMap.
- Widgets: Einbindung von Social-Media-Feeds, Wetter-Widgets oder Buchungssystemen.
- Sicherheit: Anzeige von Inhalten, die vom Hauptcode der Seite isoliert sein sollen.
Wie beeinflussen iFrames die SEO?
Für Suchmaschinen sind iFrames eine Herausforderung. Google betrachtet den Inhalt eines iFrames meist als Teil der ursprünglichen Quelle, nicht als Inhalt Ihrer eigenen Seite.
- Indexierung: Der Text innerhalb eines iFrames trägt in der Regel nicht zum Ranking der einbettenden Seite bei.
- Linkjuice: Suchmaschinen folgen den Links im iFrame oft nicht so effizient wie normalen Links.
- Best Practice: Nutzen Sie iFrames nie für Hauptinhalte oder SEO-relevante Texte.
Was ist das Sandbox-Attribut?
Das sandbox-Attribut ist ein essenzielles Sicherheitsfeature. Es schränkt die Möglichkeiten des eingebetteten Inhalts ein, um Cross-Site-Scripting (XSS) zu verhindern. Damit können Sie beispielsweise verbieten, dass der iFrame Formulare sendet, Pop-ups öffnet oder JavaScript ausführt – es sei denn, Sie erlauben es explizit (z.B. allow-scripts).
Wie macht man iFrames responsive?
iFrames haben von Natur aus keine flexible Größe. Im modernen Webdesign nutzt man CSS-Techniken wie den Aspect Ratio Box Ansatz oder das moderne CSS-Property aspect-ratio, um sicherzustellen, dass sich der iFrame (z.B. ein Video) automatisch an die Bildschirmbreite anpasst, ohne das Seitenverhältnis zu verzerren.
letzte Aktualisierung: 25. Januar 2026
Regelmäßig Tipps und Tricks rund ums Onlinemarketing.